<template>
  <container-wrapper
      :designer="designer"
      :widget="widget"
      :parent-widget="parentWidget"
      :parent-list="parentList"
      :index-of-parent-list="indexOfParentList"
  >
    <el-row
        :key="widget.id"
        gutter="widget.options.gutter"
        class="grid-container"
        :class="[selected ? 'selected' : '', customClass]"
        @click.native.stop="selectWidget(widget)"
    >
      <template v-for="(colWidget, colIdx) in widget.cols">
        <GridColWidget
            :widget="colWidget"
            :designer="designer"
            :key="colWidget.id"
            :parent-list="widget.cols"
            :index-of-parent-list="colIdx"
            :parent-widget="widget"
            :col-height="widget.options.colHeight"
        />
      </template>
    </el-row>
  </container-wrapper>
</template>

<script>
import GridColWidget from "./grid-col-widget.vue"
import designMixin from "@c/public/form-designer/designMixin"
import ContainerWrapper from "@c/public/form-designer/devType/modules/containerWrapper.vue"
import fieldMixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin"

export default {
  name: "grid-widget",
  componentName: 'ContainerWidget',
  mixins: [fieldMixin, designMixin],
  inject: ['refList'],
  components: {
    ContainerWrapper,
    GridColWidget
  },
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
  },
  computed: {
    selected() {
      return this.widget.id === this.designer.selectedId
    },

    customClass() {
      return this.widget.options.customClass || ''
    },
  },

  created() {
    this.initRefList()
  },

  //
  mounted() {},

  methods: {},

  //
  watch: {},
}
</script>

<style lang="scss" scoped>
.el-row.grid-container {
  min-height: 50px;
  outline: 1px dashed #336699;

  .form-widget-list {
    min-height: 28px;
  }
}
.grid-container.selected, .grid-cell.selected {
  outline: 2px solid #336699 !important;
}
</style>
